import React from 'react';
import { X, AlertTriangle, Settings } from 'lucide-react';
import type { ComplianceItem } from '@/types/work';
import { RiskLevel } from '@/types/work';

interface RiskCardProps {
  risk: ComplianceItem;
  guaranteeItems: ComplianceItem[];
  onRemoveAssociation: (riskId: string, guaranteeId: string) => void;
  onManageAssociations: (risk: ComplianceItem) => void;
}

/**
 * 风险卡片组件
 * 在矩阵视图中显示风险项及其关联的保障项
 */
const RiskCard: React.FC<RiskCardProps> = ({
  risk,
  guaranteeItems,
  onRemoveAssociation,
  onManageAssociations
}) => {
  // 获取关联的保障项
  const relatedGuaranteeIds = risk.related_guarantees || [];
  const relatedGuarantees = guaranteeItems.filter(item => 
    relatedGuaranteeIds.includes(item.id)
  );
  
  // 根据风险等级获取对应的颜色
  const getRiskLevelColor = (level?: RiskLevel) => {
    switch (level) {
      case RiskLevel.HIGH:
        return 'bg-red-500';
      case RiskLevel.MEDIUM:
        return 'bg-amber-500';
      case RiskLevel.LOW:
        return 'bg-green-500';
      default:
        return 'bg-gray-500';
    }
  };
  

  
  return (
    <div className="bg-card rounded-lg shadow-sm overflow-hidden border border-border hover:border-primary/50 transition-colors">
      {/* 卡片头部 */}
      <div className="p-4 border-b border-border">
        <div className="flex justify-between items-start">
          <div className="flex items-center gap-2">
            <div className={`w-3 h-3 rounded-full ${getRiskLevelColor(risk.risk_level)}`} />
            <h3 className="font-medium text-foreground line-clamp-1">{risk.title || '未命名风险项'}</h3>
          </div>
          
          <button
            onClick={() => onManageAssociations(risk)}
            className="p-1.5 rounded-md hover:bg-accent transition-colors"
            aria-label="管理关联"
          >
            <Settings className="h-4 w-4 text-muted-foreground" />
          </button>
        </div>
        
        <p className="text-sm text-muted-foreground mt-2 line-clamp-2"  title={risk.description || '暂无描述'}>
          {risk.description || '暂无描述'}
        </p>
        
        {/* 检查人信息 */}
        <div className="mt-2">
          <span className="text-xs text-muted-foreground">检查人:</span>
          <div className="mt-1 text-xs font-medium break-all text-wrap">
            {risk.inspector || '未指定'}
          </div>
        </div>
      </div>
      
      {/* 关联数量指示器 */}
      <div className="px-4 py-2 bg-muted/30 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <span className="text-xs text-muted-foreground">已关联保障项:</span>
          <span className="text-sm font-medium">
            {relatedGuaranteeIds.length}
          </span>
        </div>
      </div>
      
      {/* 关联的保障项列表 */}
      <div className="p-4">
        {relatedGuarantees.length > 0 ? (
          <div className="space-y-2 max-h-[240px] overflow-y-auto pr-2">
            {relatedGuarantees.map(guarantee => (
              <div
                key={guarantee.id}
                className="p-3 rounded-lg border border-border bg-background"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <h4 className="font-medium text-foreground line-clamp-1" title={guarantee.title || '未命名保障项'}>
                      {guarantee.title || '未命名保障项'}
                    </h4>
                    <p className="text-xs text-muted-foreground mt-1">
                      检查人: <span className="break-words">{guarantee.inspector || '未指定'}</span>
                    </p>
                  </div>
                  <button
                    onClick={() => onRemoveAssociation(risk.id, guarantee.id)}
                    className="ml-4 p-1.5 rounded-full hover:bg-muted transition-colors"
                    aria-label="移除关联"
                  >
                    <X className="h-4 w-4 text-muted-foreground" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-4 text-muted-foreground">
            <AlertTriangle className="h-5 w-5 mb-2" />
            <p className="text-sm">未关联任何保障项</p>
          </div>
        )}
      </div>
      
      {/* 卡片底部 */}
      <div className="p-3 bg-muted/30 border-t border-border">
        <button
          onClick={() => onManageAssociations(risk)}
          className="w-full py-1.5 rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors text-sm"
        >
          管理关联
        </button>
      </div>
    </div>
  );
};

export default RiskCard;
